<template>
  <div>
    <el-dialog
      :before-close="cancel"
      :title="info.isAdd?'添加商品规格':'编辑商品规格'"
      :visible.sync="info.isShow"
      center
    >
      <el-form ref="specs" :model="specsinfo" :rules="rules">
        <el-form-item prop="specsname" label="规格名称" :label-width="formLabelWidth">
          <el-input v-model="specsinfo.specsname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="attrs"
          v-for="(item,index) in attrsArr"
          :key="item.id"
          label="规格属性"
          :label-width="formLabelWidth"
        >
          <el-input style="width:80%" v-model="item.value" autocomplete="off"></el-input>
          <el-button v-if="index==0" type="primary" size="small" @click="addArr">添加规格属性</el-button>
          <el-button v-else type="danger" size="small" @click="delArr(index)">删除</el-button>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="specsinfo.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { specslist, specsadd, specsinfo, specsedit } from "../../request/api";
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      specsinfo: {
        specsname: "",
        attrs: "",
        status: 1
      },
      rules: {
        specsname: [
          { required: true, message: "商品规格名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" }
        ]
      },
      formLabelWidth: "120px",
      attrsArr: [
        {
          value: "",
          id: new Date().getTime()
        }
      ]
    };
  },
  computed: {
    ...mapGetters({
      specslist: "specs/getList",
      count: "specs/getCount"
    })
  },
  props: ["info"],
  methods: {
    ...mapActions({
      getList: "specs/getSpecsActions",
      getCount: "specs/getCountActions"
    }),
    addArr() {
      if (this.attrsArr.length < 6) {
        this.attrsArr.push({
          value: "",
          id: new Date().getTime()
        });
      } else {
        this.$message.warning("最多六个哦");
      }
    },
    delArr(i) {
      this.attrsArr.splice(i, 1);
    },
    cancel() {
      this.$emit("cancel", false);
      this.reset();
    },
    reset() {
      this.specsinfo = {
        specsname: "",
        attrs: "",
        status: 1
      };
      this.attrsArr = [
        {
          value: "",
          id: new Date().getTime()
        }
      ];
    },
    //数据回显：
    lookup(id) {
      specsinfo({ id }).then(res => {
        console.log(res, 9998);
        if (res.code == 200) {
          this.specsinfo = res.list[0];
          this.specsinfo.id = id;

          //规格属性回显
          this.specsinfo.attrs.map((item, index) => {
            if (index == 0) {
              this.attrsArr[0].id = item;
              this.attrsArr[0].value = item;
            } else {
              this.attrsArr.push({
                id: item,
                value: item
              });
            }
          });
        }
      });
    },
    //封装一个确定事件
    confirm() {
      this.$refs.specs.validate(val => {
        if (val) {
          // console.log(this.attrsArr,'动态渲染')
          // console.log(this.specsinfo,'动态渲染')
          let result = this.attrsArr.map(item => {
            return item.value;
          });
          this.specsinfo.attrs = this.attrsArr
            .map(item => item.value)
            .join(",");
          console.log(this.specsinfo, "映射新数组");
          // 验证成功之后，分别调用添加或者编辑接口
          // 添加
          if (this.info.isAdd) {
            specsadd(this.specsinfo).then(res => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                console.log(this.specsinfo, 33333);
                this.cancel();
                this.getList();
                //调用总条数
                this.getCount();
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            specsedit(this.specsinfo).then(res => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.cancel();
                this.getList();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    }
  },
  mounted() {
    if (this.specsinfo.length == 0) {
      this.getSpecs();
    }
  }
};
</script>

<style  scoped>
</style>
